<template>
    <div>
        <el-row>
            <el-col :span="2">
              <el-button type="primary" :icon="CirclePlusFilled" @click="addData.dialog = true">新增</el-button>
                <el-dialog :append-to-body="true" draggable v-model="addData.dialog" title="通知公告" width="30%">
                    <el-form :model="addData" label-width="60px">
                        <el-form-item label="标题">
                            <el-input v-model="addData.title"/>
                        </el-form-item>
                        <el-form-item label="类型">
                            <el-select v-model="addData.type" placeholder="类型">
                                <el-option label="公告" value="公告"/>
                                <el-option label="通知" value="通知"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="作者">
                            <el-input v-model="addData.author" style="width: 80px;" :disabled="true"/>
                        </el-form-item>
                        <el-form-item label="发布">
                            <el-switch 
                                v-model="addData.send"
                                inline-prompt
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                active-text="YES"
                                inactive-text="NO"
                            />
                        </el-form-item>
                        <el-form-item label="内容">
                            <el-input type="textarea" v-model="addData.content"/>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="addData.dialog = false">关闭</el-button>
                            <el-button type="primary" @click="addNotice">添加</el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-col>
            <el-col :span="7">
                <el-button type="success" plain :icon="Help" @click="getNotices">全部数据</el-button>
                <el-select v-model="noticeType" style="width: 40%;margin-left: 20px;">
                    <el-option label="公告" value="公告"/>
                    <el-option label="通知" value="通知"/>
                </el-select>
                <el-button  type="info" :icon="Search" style="margin-left: 3%;" @click="SearchNotice">搜索</el-button>
            </el-col>
            <el-col :span="8">
                <el-radio-group v-model="radio" @change="sendStatus">
                    <el-radio :label="1">已发布</el-radio>
                    <el-radio :label="0">未发布</el-radio>
                </el-radio-group>
            </el-col>
        </el-row>
        <el-table border  stripe :data="notices" style="width: 100%;margin-top: 10px;" 
        :header-cell-style="{'border-bottom':'2px solid grey','background':'#b1b3b8','text-align':'center','color':'white'}"
        :cell-style="{'text-align':'center'}" @selection-change="handleNoticeSelect">
            <el-table-column type="selection" fixed width="50" /> 
            <el-table-column prop="title" label="标题" width="120"/>
            <el-table-column label="类型" width="100">
                <template #default="scope"> 
                    <el-tag :type="scope.row.type === '公告'? '':'warning' ">{{scope.row.type}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="内容" width="380"/>
            <el-table-column prop="author" label="发布者" width="90"/>
            <el-table-column label="发布状态" width="120">
                <template #default="scope">
                    <el-switch 
                        disabled 
                        v-model="scope.row.send"
                        inline-prompt
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        active-text="YES"
                        inactive-text="NO"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="130"/>
            <el-table-column prop="sendTime" label="发布时间" width="130"/>
            <el-table-column label="操作" fixed="right" width="250">
                <template #default="scope">
                    <el-popconfirm title="确认发布吗?" @confirm="confirmSend(scope.row)" @cancel="cancelSend(scope.row)">
                        <template #reference>
                            <el-button type="primary" :icon="Position"></el-button>
                        </template>
                    </el-popconfirm>
                    <el-button type="warning" :icon="Edit" @click="EditNotice(scope.row)"></el-button>
                    <el-dialog :append-to-body="true" draggable v-model="scope.row.Editdialog" title="通知公告编辑" width="35%">
                        <el-form :model="editData" label-width="60px">
                            <el-form-item label="标题">
                                <el-input v-model="editData.title"/>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-select v-model="editData.type" placeholder="类型">
                                    <el-option label="公告" value="公告"/>
                                    <el-option label="通知" value="通知"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="作者">
                                <el-input v-model="editData.author" style="width: 80px;" :disabled="true"/>
                            </el-form-item>
                            <el-form-item label="发布">
                                <el-switch 
                                    v-model="editData.send"
                                    inline-prompt
                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                    active-text="YES"
                                    inactive-text="NO"
                                />
                            </el-form-item>
                            <el-form-item label="内容">
                                <el-input type="textarea" v-model="editData.content"/>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="scope.row.Editdialog = false">关闭</el-button>
                                <el-button type="primary" @click="updateNotice">修改</el-button>
                            </span>
                        </template>
                    </el-dialog>
                    <el-button type="danger"  :icon="Delete" @click="deleteNotice(scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-top: 20px;">
            <el-col :span="10">
                <el-tag type="success" style="height: 32px; vertical-align: middle;font-size: 17px;">
                    已选择 <span style="color: #79bbff;margin-right: 5px;">{{selected_count}}</span>条记录
                </el-tag>
                <el-button type="danger" :icon="DeleteFilled"  plain style="margin-left: 15px;" @click="bulk_deletion">批量删除</el-button>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="12">
              <div class="demo-pagination-block" style="float: right;">
                <el-pagination
                  v-model:current-page="currentPage"
                  :page-size="9"
                  :total="total"
                  :background="true"
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-col>
          </el-row>
    </div>
</template>
<script>
    import {ref,reactive} from 'vue'
    import request from '@/utils/request'
    import {useStore} from 'vuex'
    import { ElMessage,ElNotification} from 'element-plus'
    import {Edit,Delete,Position,CirclePlusFilled,Search,Help,DeleteFilled} from '@element-plus/icons-vue'
    export default{
        name:'NoticeInfo',
        setup() {
            let store = useStore()
            let icon = {Edit,Delete,Position,CirclePlusFilled,Search,Help,DeleteFilled};
            let addData = reactive({
                title:'',type:'',author:store.state.user.username,
                content:'',send:false,dialog:false
            })
            let deleteSelect = ref([])
            let editData = ref({})
            let notices = ref([]);
            let noticeType = ref('公告')
            let radio = ref(0)
            let selected_count = ref(0)
            let currentPage = ref(1)
            let total = ref(9)
            let handleCurrentChange  = (page) => {
                currentPage.value = page;
                getNotices()
            }
            let EditNotice = (notice) => {
                notice.Editdialog = true
                editData.value = notice
            }
            let confirmSend = (notice) =>{
                if(notice.send == true){
                    ElMessage({message: '该'+notice.type+'已发布!',type: 'warning'})
                }else{
                    request({
                        url:'/notice/send/',
                        method:'get',
                        params:{id:notice.id},
                        headers:{
                            Authorization:"Bearer "+store.state.user.token,
                        }
                    }).then((resp) => {
                        if(resp.message === 'success'){
                            getNotices()
                            ElNotification({
                                title: 'Success',
                                message:notice.type+'发布成功!',
                                type: 'success',
                            })
                        }
                    }).catch(() => {
                        ElNotification({
                            title: 'Error',
                            message:'发布失败!',
                            type: 'error',
                        })
                    });                                                                
                }
            }
            let cancelSend = () =>{
                console.log("取消")
            }
            let getNotices = () => {
                request({
                    url:'/notice/getAll/',
                    method:'get',
                    params:{
                        page:currentPage.value
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    }
                }).then((resp) => {
                    total.value = resp.total
                    for (const notice of resp.notices) {
                        if(notice.sendTime === null || notice.send === false)
                            notice.sendTime = 'not published'
                        notice.Editdialog = false
                    }
                    notices.value = resp.notices;
                }).catch((err) => {
                   console.log(err) 
                });
            }
            getNotices()
            let addNotice = () => {
                request({
                    url:'/notice/add/',
                    method:'get',
                    params:{
                        title:addData.title,
                        type:addData.type,
                        content:addData.content,
                        author:addData.author,
                        send:addData.send
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    }  
                }).then((resp) => {
                    if(resp.message === 'success'){
                        getNotices()
                        ElMessage({message: '新增成功!',type: 'success'})
                    }
                    addData.dialog = false
                }).catch((err) => {
                    ElMessage({message: '新增失败!',type: 'error'})
                    console.log(err)
                    addData.dialog = false
                });
            }
            let updateNotice = () => {
                request({
                    url:'/notice/update/',
                    method:'post',
                    data:{
                        ...editData.value,
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    }  
                }).then((resp) => {
                    if(resp.message === 'success'){
                        getNotices()
                        ElMessage({message: '修改成功!',type: 'success'})
                    }
                    editData.value.Editdialog = false
                }).catch((err) => {
                    ElMessage({message: '修改失败!',type: 'error'})
                    console.log(err)
                    editData.value.Editdialog = false
                });
            }
            let deleteNotice = (id) => {
                request({
                    url:'/notice/delete/',
                    method:'post',
                    data:id,
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    } 
                }).then((resp) => {
                    if(resp.message === 'success'){
                        getNotices()
                        ElMessage({message: '删除成功!',type: 'success'})
                    }
                }).catch((err) => {
                    ElMessage({message: '删除失败!',type: 'error'})
                    console.log(err)
                });
            }
            let handleNoticeSelect = (selected) => {
                deleteSelect.value = selected
                selected_count.value = selected.length
            }
            let SearchNotice = () => {
                let send = true
                if(radio.value === 0)
                    send = false
                request({
                    url:'/notice/typeLike/',
                    method:'get',
                    params:{
                        type:noticeType.value,
                        send:send
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    } 
                }).then((resp) => {
                    for (const notice of resp) {
                        notice.Editdialog = false
                    }
                    notices.value = resp;
                }).catch((err) => {
                    console.log(err)
                });
            }
            let sendStatus = () => {
                SearchNotice()
            }
            let bulk_deletion = () => {
                for (const notice of notices.value) {
                    if(notice.sendTime === 'not published')
                        notice.sendTime = ''
                }
                if(selected_count.value != 0){
                    request({
                        url:'/notice/bulkDelete/',
                        method:'post',
                        data:{
                            notices:deleteSelect.value
                        },
                        headers:{
                            Authorization:"Bearer "+store.state.user.token,
                        },
                    }).then((resp)=>{
                        if(resp.message === 'success'){
                            getNotices()
                            ElMessage({message: '删除成功!',type: 'success'})
                            deleteSelect.value = []
                            }else{
                                ElMessage({message: '删除失败!',grouping: true,type: 'error'})
                            }
                        }).catch(() => {
                            ElMessage({message: '删除失败!',grouping: true,type: 'error'})
                        });
                }else{
                    ElMessage({message: '请勾选删除的选项!',grouping: true,type: 'warning'})
                }
            }
            return {
                ...icon,
                notices,
                radio,
                noticeType,
                editData,
                addData,
                currentPage,
                total,
                selected_count,
                getNotices,
                confirmSend,
                cancelSend,
                handleNoticeSelect,
                handleCurrentChange,
                EditNotice,
                addNotice,
                updateNotice,
                deleteNotice,
                SearchNotice,
                sendStatus,
                bulk_deletion,
            }
        },
    }
</script>
<style scoped> 

</style>